Description

Building on the work made by @vijaivir.

This PR updates the formiojs library from version 4.14.13 to 4.21.5. The primary motivator for this upgrade is that version4.19 fixes an issue where a select list component within a data grid component isn't rendered correctly.

Walter pointed out that there is a double render bug for HTMLElement components in version 4.19, so keep an eye out for it.

Before Upgrade

After Upgrade

Issues

This upgrade also introduces an issue where the HTML component using a <p> tag renders twice. For example, using the following HTML code will render the <p> content twice.

<p style=" word-break: keep-all; min-width: 80px; text-align: center;">
  <b>Sample<br>Heading</b>
</p>

This is likely due to a bug in Formio's HTML rendering logic. A user has raised this with their team, and it's currently being worked on.

Solution 1: Use Attributes

The Formio HTML element component is meant to be used as a low-code component that provides configuration for CSS classes and attributes in its settings. Formio recommends using the 'Content' component for more complex HTML in their documentation. The first solution is to remove the <p> tag from the content field and use the attributes to define the style.

Solution 2: Use <div>

The second solution would be to use div as the HTML tag value instead of the default p. This makes it so the content is placed within a <div> tag and the content is not duplicated.

This is a faster solution, but it will remove the default margins applied to <p> tags.

Further Comments

The PR deployment can be used to test out more complex forms and ensure that the HTML content is rendering correctly. There might be similar solutions, such as using the <span> tag, depending on the use case. If the issue with the select list not rendering isn't critical, we can wait for the next version in which Formio fixes the issue, but more testing would need to be done as that would be an upgrade to version ^4.21.2.

Types of changes

build (change in build system or dependencies)

Checklist

• I have read the CONTRIBUTING doc
• I have checked that unit tests pass locally with my changes
• I have run the npm script lint on the frontend and backend
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• I have approval from the product owner for the contribution in this pull request